<template>
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" :collapse="$store.state.homeview.navBool" @open="handleOpen" @close="handleClose" router>
        <!-- 带下拉的导航 -->
        <template v-for="(v, i) in router.options.routes[2].children" :key="v.path" >
            <el-sub-menu :index="v.path" v-if="v.children">
                <template #title>
                    <el-icon>
                        <location />
                    </el-icon>
                    <span>{{ v.meta.title }}</span>
                </template>
                <el-menu-item-group v-for="(val, index) in v.children" :key="val.path">
                    <el-menu-item :index="v.path">{{ val.meta.title }}</el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
            <!-- 不带下拉的列表 -->
            <el-menu-item :index="v.path" v-else>
                <el-icon>
                    <setting />
                </el-icon>
                <span>{{ v.meta.title }}</span>
            </el-menu-item>

        </template>
    </el-menu>
</template>

<script setup lang="ts">
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

onMounted(() => {
    console.log(router.options.routes);
})

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
}

const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
}
</script>

<style scoped></style>